<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <#include "/resources/share/common/_commresource.html"/> 
    <title>随意论坛</title>
</head>

  <body>
    <#include "/resources/share/common/_commtop.html"/> <section class="content-wrap">
        <div class="container">
            <div class="row">

<#if session['user']??>            
<main class="col-md-12 main-content">
<article class="post">
	<div class="template-page-wrapper">
	<form class="form-horizontal templatemo-signin-form" role="form" id="registerform" 
		action="${contextPath}/login/modify" method="post" enctype="multipart/form-data">
		<!-- 头像start --> 
		<div class="form-group">
			<div class="col-md-12">
				<label for="username" class="col-sm-5 control-label">头像</label>
				<div class="col-sm-3">
				<input type="hidden" id="headPortraitImg" name="head_portrait_img" value="" /> 
				<input type="file" id="picFile" onchange="readFile(this)"
								style="display: none" /> 
				<img id="headPortraitImgSrc2"
								src="${session['user'].head_portrait_img}"
								onclick="getFileUpload();" style="width: 50px; height: 50px;" />
				</div>
				<div class="col-sm-4"></div>
			</div>
		</div>
		<script type="text/javascript">
		function getFileUpload(){
			document.getElementById("picFile").click();
		}
		function readFile(obj) {
			var file = obj.files[0];
			//判断类型是不是图片  
			if(!/image\/\w+/.test(file.type)) {
				alert("请确保文件为图像类型");
				return false;
			}
			//上次修改时间  
			//alert(file.lastModifiedDate); 
				//名称  
			//alert(file.name); 
			//大小 字节  
			var fsize = file.size; 
			//判断文件大小
			if(fsize/1024 >5000){
				alert("上传图片大小不能大于5M");
				return false;
			}
			var reader = new FileReader();
			reader.readAsDataURL(file);
			reader.onload = function(e) { 
				document.getElementById("headPortraitImg").value=this.result;
				document.getElementById("headPortraitImgSrc2").src = this.result;
			}
		}
		</script>
		<!-- 头像end -->
		
		<!-- 用户名start -->
		<div class="form-group">
			<div class="col-md-12">
				<label for="username" class="col-sm-5 control-label">用户名</label>
				<div class="col-sm-3">
				<input type="text" class="form-control"
									id="userName" name="userName" value="${session['user'].userName!''}" disabled/>
				</div>
				<div class="col-sm-4"></div>
			</div>
		</div>
		<!-- 用户名end -->
			
		<!-- 昵称start -->
		<div class="form-group">
			<div class="col-md-12">
				<label for="nickName" class="col-sm-5 control-label">昵 称</label>
				<div class="col-sm-3">
				<input type="text" class="form-control"
									id="nickName" name="nickName" value="${session['user'].nickName!''}"/>
				</div>
				<div class="col-sm-4"></div>
			</div>
		</div>
		<!-- 昵称名end -->
		
		<!-- tel start -->
		<div class="form-group">
			<div class="col-md-12">
				<label for="tel" class="col-sm-5 control-label">电 话</label>
				<div class="col-sm-3">
				<input type="text" class="form-control"
									id="tel" name="tel" value="${session['user'].mobile!''}"/>
				</div>
				<div class="col-sm-4"></div>
			</div>
		</div>
		<!-- tel end -->
		
		<!-- email start -->
		<div class="form-group">
			<div class="col-md-12">
				<label for="email" class="col-sm-5 control-label">邮 箱</label>
				<div class="col-sm-3">
				<input type="text" class="form-control"
									id="email" value="${session['user'].email!''}" disabled/>
				</div>
				<div class="col-sm-4">
				</div>
			</div>
		</div>		
		
		<!-- operation 操作按钮 -->
		<div class="form-group">
			<div class="col-md-4">
			</div>
			<div class="col-md-4" >
    		<button type="submit" class="btn btn-danger" type="submit" style="width:60%; margin-right:5%;">保存</button>
    		<a class="btn btn-warning" href="#" role="button" style="width:30%;">取消</a> 
			</div>
			<div class="col-md-4">
			</div>
		</div>
        
	</form>
	</div>
</article>
</main>
</#if>
            </div>
        </div>
    </section>
</body>

	<script type="text/javascript">
		$(document).ready(function() {
			/**
			 * 下面是进行插件初始化
			 * 你只需传入相应的键值对
			 * */
			$('#registerform').bootstrapValidator({
				message : 'This value is not valid',
				feedbackIcons : {/*输入框不同状态，显示图片的样式*/
					valid : 'glyphicon glyphicon-ok',
					invalid : 'glyphicon glyphicon-remove',
					validating : 'glyphicon glyphicon-refresh'
				},
				fields : {/*验证*/
					nickName: {
		                 message: 'The nickName is not valid',
		                 validators: {
		                     notEmpty: {
		                         message: '昵称不能为空'
		                     },
		                     stringLength: {
		                         min: 2,
		                         max: 10,
		                         message: '昵称只能是2-12位'
		                     }
		                 }
		             },
					tel: {
		                 message: 'The phone is not valid',
		                 validators: {
		                     notEmpty: {
		                         message: '手机号码不能为空'
		                     },
		                     stringLength: {
		                         min: 11,
		                         max: 11,
		                         message: '请输入11位手机号码'
		                     },
		                     regexp: {
		                         regexp: /^1[3|5|8]{1}[0-9]{9}$/,
		                         message: '请输入正确的手机号码'
		                     }
		                 }
		             }
				}
			});
		});
	</script>
</html>